<template>
	<view class="find-password-wrapper">
		<custom-header-bar title="找回密码结果" backStatus="1"></custom-header-bar>
		<div class="content-box">
			<div class="title">恭喜您，密码已成功重置</div>
			<div class="title">请使用初始密码：</div>
			<div class="password-text">111111</div>
			<div class="password-bg">
				<image class="image" src="/static/bg-password.png" mode="heightFix"></image>
			</div>
			<div class="submit-wrapepr">
				<button class="button active" @click="login" type="default">立即登录</button>
			</div>
		</div>
	</view>
</template>

<script>
	import CustomHeaderBar from "@/components/custom-header-bar.vue"
	export default {
		components: {
			CustomHeaderBar
		},
		data() {
			return {}
		},
		methods: {
			login() {
				uni.reLaunch({
					url: "/pages/moduleLogin/login/login"
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/utils/variable.scss';

	.find-password-wrapper {
		height: 100vh;
		background: linear-gradient(-36deg, rgba(129, 216, 207, 0.73), rgba(100, 201, 191, 0.73));
		padding: 160upx 50upx 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.content-box {
			height: calc(100vh - 200upx);
			background-color: rgba(255, 255, 255, .65);
			border-radius: 24upx;
			padding: 20vh 48upx;
			box-sizing: border-box;

			.title {
				margin-top: 24upx;
				padding: 0 40upx;
				font-size: 40upx;
				font-weight: 500;
				color: #146960;
			}

			.password-text {
				margin-top: 80upx;
				text-align: center;
				font-size: 60upx;
				font-weight: 800;
				color: #146960;
				background: radial-gradient(rgba(149, 239, 230, 0.94) 0%, rgba(60, 190, 177, 0.94) 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.password-bg {
				margin-top: -24upx;
				text-align: center;

				.image {
					height: 16upx;
				}
			}
		}

		.submit-wrapepr {
			margin-top: 20vh;

			.button {
				color: rgba(186, 193, 192, 1);
				background: rgba(219, 231, 230, 1);
				letter-spacing: 8upx;
				height: 84upx;
				line-height: 84upx;
				font-size: 32upx;

				&.active {
					color: #ffffff;
					background: linear-gradient(-36deg, rgba(114, 215, 204, 0.6), rgba(40, 207, 179, 0.6));
					box-shadow: 0upx 7upx 14upx 1upx rgba(129, 216, 207, 0.41);
					border-radius: 18upx;
				}

				&:after {
					border: none
				}
			}
		}
	}
</style>
